<template>
  <div v-if="showNesTab" class="notice_news" :class="`notice_news--${$store.state.layoutType}`">
      <div class="out_news" @click="showNesTab = false"></div>
      <div class="news_body">
        <el-tabs v-model="activeName" stretch="true" @tab-click="handleClick">
          <el-tab-pane label="通知" name="news_a">

            <div class="no_news">
              <img src="~@/assets/img/news_no.svg" alt="">
              <p>你已查看所有通知</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="消息" name="news_b">
            <div class="no_news">
              <img src="~@/assets/img/news_no.svg" alt="">
              <p>你已查看所有通知</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="待办" name="news_c">
            <div class="no_news">
              <img src="~@/assets/img/news_no.svg" alt="">
              <p>你已查看所有通知</p>
            </div>
          </el-tab-pane>
        </el-tabs>
        <div class="bottom_btn">
          <a href="javascript:;">清空通知</a>
          <a href="javascript:;" @click="showNesTab = false">关闭</a>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'notice_news',
  components: {},
  data () {
    return {
      showNesTab: false,
      activeName: 'news_a'
    }
  },
  props: {},
  watch: {},
  methods: {
    /* wf_Huang 2019/10/22 0022 初始化消息通知 */
    init () {
      this.showNesTab = true
    },
    /* wf_Huang 2019/10/22 0022 切换通知栏 */
    handleClick (val) {
      console.log(val)
    }
  },
  computed: {},
  created () {
  },
  mounted () {
  },
  destroyed () {
  }
}
</script>
<style lang="scss" scoped>
  .notice_news {
    transition: all 0.3s;
    .out_news{
      position: fixed;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    .news_body{
      position: fixed;
      top: 70px;
      right: 88px;
      width: 300px;
      border-radius: 3px;
      box-shadow: 0 0 3px rgba(0,0,0,0.2);
      background-color: #FFFFFF;
      .no_news{
        padding: 40px;
        text-align: center;
        p{
          font-size: 14px;
          color: #DAE0E5;
        }
      }
      .bottom_btn{
        display: flex;
        border-top: 1px solid #efefef;
        a{
          flex: 1;
          line-height: 45px;
          text-align: center;
          text-decoration: none;
          color: #666666;
          &:last-child{
            border-left: 1px solid #efefef;
          }
        }
      }
    }
  }
  .notice_news--top{
    .news_body{
      position: fixed;
      top: 70px;
      right: 50%;
      width: 300px;
      border-radius: 3px;
      box-shadow: 0 0 3px rgba(0,0,0,0.2);
      background-color: #FFFFFF;
      transform: translate(171%, 0);
    }
  }
</style>
